<template>
  <view>
    <uni-popup ref="contractPopup" type="center" :is-mask-click="false">
      <view class="contract-box">
        <view class="text-center">
          <text class="text-black text-7xl text-bold">用户服务协议与隐私政策</text>
        </view>
        <view class="text-df text-black text-content-df margin-top-df">
          <text>欢迎使用两癌筛查服务助手小程序，在您使用小程序服务前，请认真阅读</text>
          <text class="text-blue-a" @tap="viewUserServiceAgreement">《用户服务协议》</text>
          <text>和</text>
          <text class="text-blue-a" @tap="viewPrivacyPolicy">《隐私政策》</text>
          <text>全部条款。我们非常重视您的用户权益与个人信息的保护，我们将通过上述协议向您说明我们如何为您提供服务并保障您的用户权益，如您同意，请点击“同意”接受我们的服务。</text>
        </view>
        <view class="text-center margin-top-xl">
          <button size="mini" class="btn-df text-white" @tap="toAgree">同 意</button>
        </view>
      </view>
      <uni-popup ref="extraPopup" type="center" :is-mask-click="false">
        <view class="extra-box">
          <view v-if="userServiceAgreement">
            <view class="text-center">
              <text class="text-black text-7xl text-bold">用户服务协议</text>
            </view>
            <view class="margin-top-df">
              <scroll-view style="height: 60vh;overflow: hidden;" :scroll-y="true">
                <view class="text-df text-black text-content-df">
                  <text>用户服务协议</text>
                </view>
              </scroll-view>
            </view>
          </view>
          <view v-if="privacyPolicyBool">
            <view class="text-center">
              <text class="text-black text-7xl text-bold">隐私政策</text>
            </view>
            <view class="margin-top-df">
              <scroll-view style="height: 60vh;overflow: hidden;" :scroll-y="true">
                <view class="text-df text-black text-content-df">
                  <text>隐私政策</text>
                </view>
              </scroll-view>
            </view>
          </view>
          <view class="text-center margin-top-xl">
            <button size="mini" class="btn-df text-white" @tap="viewExtraClose">确 定</button>
          </view>
        </view>
      </uni-popup>
    </uni-popup>
  </view>
</template>

<script>
  export default {
    name: "contract-popup",
    props: {
      isShow: {
        type: Boolean,
        default: false
      },
    },
    data() {
      return {
        extraPopupShow: false,
        // 用户服务协议
        userServiceAgreement: false,
        // 隐私政策
        privacyPolicyBool: false,
      };
    },
    watch: {
      isShow: {
        handler(val) {
          if (val) {
            this.openPopup();
          } else {
            this.closePopup();
          }
        },
        deep: true
      },
    },
    methods: {
      openPopup() {
        this.$refs.contractPopup.open(this.type);
      },
      closePopup() {
        this.$refs.contractPopup.close();
      },

      viewUserServiceAgreement() {
        console.log("用户服务协议");
        this.userServiceAgreement = true;
        this.privacyPolicyBool = false;
        this.$refs.extraPopup.open('top');
      },
      viewPrivacyPolicy() {
        console.log("隐私政策");
        this.userServiceAgreement = false;
        this.privacyPolicyBool = true;
        this.$refs.extraPopup.open('top');
      },
      viewExtraClose() {
        this.$refs.extraPopup.close();
      },

      toAgree() {
        tip.loading();
        http.post('/sys/agreeAgreementPolicy').then((res) => {
          let result = res.result || {};
          wx.setStorageSync('loginUserInfo', result.userInfo || {});
          this.$emit('ok')
          this.closePopup();
        }).finally(() => {
          tip.hide();
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  @import "@/scss/common.scss";

  .contract-box {
    margin: 15vh 15vw;
    padding: 15rpx 30rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
  }

  .extra-box {
    margin: 10vh 15vw;
    padding: 15rpx 30rpx;
    border-radius: 10rpx;
    background-color: #ffffff;
  }

  .margin-top-df {
    margin-top: 20rpx;
  }

  .margin-top-xl {
    margin-top: 50rpx;
  }
</style>
